<template>
  <div class="app-container">
    <div class="topform">
      <el-input style="width: 300px" clearable v-model="form.serchKeyword" placeholder="请输入搜索内容"
                autocomplete="off"/>
      <el-button type="primary" style="margin-left: 10px" :loading="btnloading" @click="getlistdata(true)"
                 icon="el-icon-search">搜索
      </el-button>
      <el-button type="primary" @click="adddialog=true" icon="el-icon-circle-plus-outline">添加</el-button>
    </div>
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
              header-cell-class-name="tableheader">
      <el-table-column align="center" label="合作意向" width="140">
        <template slot-scope="scope"> 
          <el-rate
            disabled
            v-model="scope.row.cooperation_lv" 
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']" style="margin-top:10px;">
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column align="center" label="店铺名称" width="200">
        <template slot-scope="scope">
          {{ scope.row.shop_name }}
        </template>
      </el-table-column> 
      <el-table-column align="center" label="联系人" width="70">
        <template slot-scope="scope">
          {{ scope.row.link_person }}
        </template>
      </el-table-column> 
      <el-table-column align="center" label="联系电话" width="100">
        <template slot-scope="scope">
          {{ scope.row.link_phone }}
        </template>
      </el-table-column> 
      <el-table-column align="center" label="地址" width="200">
        <template slot-scope="scope">
          {{ scope.row.address }}
        </template>
      </el-table-column>  
      <el-table-column align="center" label="状态" width="70">
        <template slot-scope="scope">
          {{ scope.row.state == 1?"合作中": scope.row.state == 2?"已中止":"未知"}}
        </template>
      </el-table-column>  
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="openedit(scope.row)" icon="el-icon-edit">编辑</el-button>
          <el-button size="mini" type="danger" @click="delbtn(scope.row)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    
    <div class="pagination">
      <el-pagination
        style="text-align: center"
        layout="prev, pager, next"
        small
        :current-page="form.page"
        :page-size="form.pagesize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>


    <el-dialog title="保存类型" :visible.sync="adddialog" width="35%" :close-on-click-modal="false">
      <el-form :model="addform" ref="addform" :rules="rule" label-width="100px">
        <el-form-item label="店铺名称" prop="shop_name">
          <el-input clearable v-model="addform.shop_name" autocomplete="off"/>
        </el-form-item>  
        <el-form-item label="联系人" prop="link_person">
          <el-input clearable v-model="addform.link_person" autocomplete="off"/>
        </el-form-item>  
        <el-form-item label="联系电话" prop="link_phone">
          <el-input clearable v-model="addform.link_phone" autocomplete="off"/>
        </el-form-item> 
        <el-form-item label="地址" prop="address">
          <el-input clearable v-model="addform.address" autocomplete="off"/>
        </el-form-item>  
        <el-form-item label="合作状态" prop="state">
          <el-select v-model="addform.state" placeholder="请选择活动状态">
                    <el-option label="请选择" value=""></el-option>
                    <el-option label="合作中" :value="1"></el-option> 
                    <el-option label="已中止" :value="2"></el-option>
                </el-select>
        </el-form-item>
        <el-form-item label="合作意向" prop="cooperation_lv">
          <el-rate
            v-model="addform.cooperation_lv" 
            :colors="['#99A9BF', '#F7BA2A', '#FF9900']" style="margin-top:10px;">
          </el-rate>
        </el-form-item>  
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" clearable v-model="addform.remark" autocomplete="off"/>
        </el-form-item>  
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addbtn">保存</el-button>
      </div>
    </el-dialog>  
  </div>
</template>

<script>  
import * as imageConversion from 'image-conversion'
export default {
  data() {
    return { 
      action_url: this.$api + "/tools/save_file",
      btnloading: false,  
      form: {
        serchKeyword: '',
        page: 1,
        pagesize: 20
      },
      addform: {
        consignment_shop_id: '',
        shop_name: '', 
        link_person:'',
        link_phone:'',
        address:'',
        state:'',
        remark:'',
        cooperation_lv:0, 
      }, 
      rule: {
        shop_name: [
          {required: true, message: '此项为必填项'},
        ], 
        state:[  {required: true, message: '此项为必填项'}]
      },
      list: null,
      alllist: null,
      total: 0,
      listLoading: true,
      adddialog: false,
      editdialog: false,
      addicondia: false,
      editicondia: false
    };
  }, 
  created() { 
    this.getlistdata(); 
  },
  methods: {
    getlistdata(isquery) {
      this.listLoading = true;
      if (isquery === true) {
        this.form.page = 1
      }
      this.$post(this.$api + '/nw/get_nw_consignment_shop', {
        'serchKeyword': this.form.serchKeyword,
        'page': this.form.page,
        'pagesize': this.form.pagesize
      }, false, this)
        .then((res) => {
          this.listLoading = false;
          if (res.code === 0) {
            this.list = res.rows;
            this.total = res.total;
          } else {
            this.$notify({
              title: '失败',
              message: res.msg,
              type: 'error'
            });
          }
        });
    }, 
    addbtn() {
      this.$refs["addform"].validate((valid) => {
          if (valid) {
            this.listLoading = true;
            this.$post(this.$api + '/nw/save_nw_consignment_shop', this.addform)
              .then((res) => {
                this.listLoading = false;
                if (res.code === 0) {
                  this.$notify({
                    title: '成功',
                    message: res.msg,
                    type: 'success'
                  });
                  this.adddialog = false;
                  this.addform = {
                      consignment_shop_id: '',
                      shop_name: '', 
                      link_person:'',
                      link_phone:'',
                      address:'',
                      state:'',
                      remark:'',
                      cooperation_lv:null, 
                  };
                  this.getlistdata(); 
                } else {
                  this.$notify({
                    title: '失败',
                    message: res.msg,
                    type: 'error'
                  });
                }
              });
              }else{
                console.log('error submit!!');
                return false;
              }
          });
    },
    openedit(item) {
          this.adddialog = true;
          for(var i in this.addform)
          { 
               this.addform[i] = item[i];  
          } 
    }, 
    delbtn(item) {
      this.$confirm('确认删除？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        this.$get(this.$api + '/nw/del_nw_consignment_shop', {
          'consignment_shop_id': item.consignment_shop_id
        })
          .then((res) => {
            this.listLoading = false;
            if (res.code === 0) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              });
              this.getlistdata();
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      })
    },
    handleSizeChange(v) {
      this.form.pagesize = v;
      this.getlistdata();
    },
    handleCurrentChange(v) {
      this.form.page = v;
      this.getlistdata();
    }
  }
};
</script>

